<template>
    <el-header class="header">
        <el-row>
            <el-col :span="8">
                <img src="../assets/icon/parking0.png" style="width: 50px; height: 50px;" alt="Logo">
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">城市智慧停车管理系统</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple buttons-container">
                    <!-- 根据登录状态动态显示 -->
                    <template v-if="isLoggedIn">
                        <el-avatar class="user-avatar" icon="el-icon-user"></el-avatar>
                        <span class="welcome-text">欢迎，{{ userInfo.username }}</span>
                        <el-button type="warning" @click="logout">退出登录</el-button>
                    </template>
                    <template v-else>
                        <el-button type="primary" icon="el-icon-s-custom" @click="navigateTo('Login')">登录</el-button>
                    </template>
                    <el-button type="primary" icon="el-icon-setting">设置</el-button>
                </div>
            </el-col>
        </el-row>
    </el-header>
</template>

<script>
export default {
    data() {
        const userSession = localStorage.getItem("userSession");
        console.log(userSession);
        return {
            userInfo: userSession ? JSON.parse(userSession) : {},  // 如果没有数据，默认为空对象
        };
    },
    computed: {
        isLoggedIn() {
            return this.userInfo && this.userInfo.username;  // 确保 userInfo 有 username
        },
    },
    methods: {
        navigateTo(routeName) {
            this.$router.push({ name: routeName }).catch((err) => {
                if (err.name !== "NavigationDuplicated") {
                    throw err;
                }
            });
        },
        logout() {
            // 清除登录信息
            localStorage.removeItem("userSession");
            this.userInfo = {};  // 清空当前用户信息
            this.$router.push({ name: "Login" });  // 跳转到登录页
        },
    },
};
</script>

<style>
.header {
    background-color: rgb(253, 253, 253);
    color: black;
    text-align: center;
    font-size: 2vw;
    line-height: 60px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: block;

}
.el-header {
  justify-content: space-between;
  align-items: center;
}

.el-col {
  flex-shrink: 1; /* 允许弹性收缩 */
}

.buttons-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 10px !important;
    gap: 15px !important;
    /* 增加间距 */
}

.user-avatar {
    background-color: #409eff !important;
    margin-right: 10px !important;
    border-radius: 50% !important;
    /* 圆形头像 */
}

.welcome-text {
    font-size: 14px !important;
    color: #333;
    margin-right: 10px !important;
}

/* 按钮样式 */
.el-button {
    border-radius: 20px !important;
    /* 圆角按钮 */
    padding: 10px 20px !important;
    /* 增加填充 */
    font-size: 14px !important;
    transition: background-color 0.3s, transform 0.3s !important;
    /* 过渡效果 */
}

.el-button:hover {
    background-color: #f0f9ff !important;
    /* 悬停时的背景色 */
    transform: scale(1.05) !important;
    /* 轻微放大 */
}

.el-button[type="primary"] {
    background-color: #409eff !important;
    /* 主按钮颜色 */
    border-color: #409eff !important;
}

.el-button[type="primary"]:hover {
    background-color: #66b1ff !important;
    /* 主按钮悬停颜色 */
}

.el-button[type="warning"] {
    background-color: #e6a23c !important;
    /* 警告按钮颜色 */
    border-color: #e6a23c !important;
}

.el-button[type="warning"]:hover {
    background-color: #ebb563 !important;
    /* 警告按钮悬停颜色 */
}
</style>
